<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的申请" name="first"> </el-tab-pane>
      <el-tab-pane label="我的审批" name="second"> </el-tab-pane>
      <el-tab-pane label="全部审批流程" name="third"> </el-tab-pane>
    </el-tabs>
    <my-application v-if="activeName == 'first'" />
    <my-approval v-if="activeName == 'second'" />
    <all-approvals v-if="activeName == 'third'" />
  </div>
</template>

<script>
import MyApplication from "./components/myApplication";
import MyApproval from "./components/myApproval";
import AllApprovals from "./components/allApprovals";
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  components: {
    MyApplication,
    MyApproval,
    AllApprovals,
  },
  watch: {
    // 监视路由变化
    "$route.query.activeName": {
      immediate: true,
      handler() {
        this.activeName = this.$route.query.activeName?this.$route.query.activeName:'first';
      },
    },
  },
  methods: {
    handleClick(tab, event) {
    },
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
.internal-approval {
}
</style>